<script setup lang="ts">
import { computed } from 'vue'
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'

import { searchConfig } from './config/search.config'
import { contentConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { useEntriesDataStore } from '@/store/main/main'

import usePageContent from '@/hooks/usePageContent'
import { usePageModal } from '@/hooks/usePageModal'

// 对modalConfig进行操作
const modalConfigRef = computed(() => {
  const useEntries = useEntriesDataStore()
  const departments = useEntries.allDepartments.map((item) => ({
    label: item.name,
    value: item.id
  }))
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options?.push(...departments)
    }
  })
  return modalConfig
})
// 点击search，content的操作
const { userDataShowRef, resetClick, searchClick } = usePageContent()

const { newUserModelRef, userNewModelShow, userEditModalShow } = usePageModal()
</script>
<template>
  <div class="department">
    <div class="main-top">
      <page-search
        :search-config="searchConfig"
        @resetClick="resetClick"
        @searchClick="searchClick"
      ></page-search>
    </div>
    <div class="main-content">
      <page-content
        :content-config="contentConfig"
        ref="userDataShowRef"
        @userNewModelShow="userNewModelShow"
        @userEditModalShow="userEditModalShow"
      ></page-content>
    </div>
    <page-modal
      ref="newUserModelRef"
      :modal-config="modalConfigRef"
    ></page-modal>
  </div>
</template>

<style scoped>
.department {
}
</style>
